<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="formData" class="demo-formData" style="width: 50%;">
      <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
        <el-input v-model.number="formData.id" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
        <el-input v-model="formData.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formData.name" autocomplete="off" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formData.sex" autocomplete="off" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="学号" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formData.studentId" autocomplete="off" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="年级" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formData.grade" autocomplete="off" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="formData.phone" autocomplete="off" maxLength="11"></el-input>
      </el-form-item>
      <el-form-item label="所属组织" :label-width="formLabelWidth">
        <el-input v-model="formData.association" autocomplete="off" maxLength="11" readonly></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-left: 450px">
      <el-button type="primary" @click="updateForm">确 定</el-button>
      <el-button type="primary" @click="dialogFormVisible = true">修改密码</el-button>
    </div>


    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="formData" class="demo-formData">
        <el-form-item label="旧密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="formData.oldPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="再输入一次新密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="formData.passwordTwo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getPageStudentList,addStudent,deleteStudent,getStudent} from "@/api/student";
  import {updateStudent, updateStudentAndPassword} from "../../../api/student";
  export default {
    name: "MyAccount",
    data() {
      return {
        formData: null,
        formLabelWidth: '120px',
        rules: {
          userName: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          association: [
            {required: true, message: '请输入选择所属组织', trigger: 'blur'},
          ],
          phone: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
        },
        dialogFormVisible: false,
      }
    },
    created() {
      this.getMyAccount();
    },
    methods: {
      getMyAccount() {
        getStudent().then(res=>{
          this.formData = res.data;
        })
      },
      updateForm() {
        this.formData.createTime = "";
        this.formData.updateTime = "";
        updateStudent(this.formData).then(res=> {
          if (res.successed) {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
          }else {
            this.$message({
              type: 'error',
              message: '操作失败'
            });
          }
        })
      },
      updatePassword() {
        this.formData.createTime = "";
        this.formData.updateTime = "";
        if (this.formData.passwordTwo != this.formData.password) {
          this.$message({
            type: 'error',
            message: '两次新密码不一样'
          });
          return
        }
        updateStudentAndPassword(this.formData).then(res=>{
          if (res.successed) {
            this.$message({
              type: 'success',
              message: '修改密码成功'
            });
            this.dialogFormVisible = false;
          }else {
            this.$message({
              type: 'error',
              message: res.message
            });

          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
